<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps({
    title: String,
    description: String,
    imageUrl: String,
    client: String,
    width: String,
    backgroundColor: String,
    colorP: String,
    colorH: String,
})

</script>

<template>
    <div class="my-component" :style="{ width: props.width, backgroundColor: props.backgroundColor }">
        <h4 :style="{ color: props.colorH }">{{ props.title }}
            <span v-if="client"><strong>{{ props.client }}</strong></span>
        </h4>
        <p :style="{ color: props.colorP }">{{ props.description }}
        </p>
        <img v-if="imageUrl" :src="props.imageUrl" class="bcImg">
        <div v-else class="slideImg">
            <div class="imgfa1">
                <div class="imgFirst1">
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first1.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first2.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first3.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first4.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first5.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first6.png">
                    </div>
                </div>
                <div class="imgFirst2">
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first1.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first2.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first3.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first4.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first5.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoFirst/first6.png">
                    </div>
                </div>
            </div>
            <div class="imgfa2">
                <div class="imgSecond1">
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second1.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second2.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second3.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second4.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second5.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second6.png">
                    </div>
                </div>
                <div class="imgSecond2">
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second1.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second2.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second3.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second4.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second5.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoSecond/second6.png">
                    </div>
                </div>
            </div>
            <div class="imgfa3">
                <div class="imgThirdly1">
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly1.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly2.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly3.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly4.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly5.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly6.png">
                    </div>
                </div>
                <div class="imgThirdly2">
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly1.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly2.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly3.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly4.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly5.png">
                    </div>
                    <div class="useImg">
                        <img src="/images/functionSatisfaction/photoThirdly/Thirdly6.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.my-component {
    height: 476px;
    color: #000;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;

    h4 {
        font-size: 21px;
        padding: 30px 0 5px 30px;
        display: flex;

        span {
            font-size: 14px;
            display: block;
            width: 80px;
            height: 20px;
            margin-top: 10px;
            text-align: center;
            background-color: rgb(240, 239, 254);
            border-radius: 5px;
            border: 2px solid rgb(240, 239, 254);
            color: rgb(114, 103, 241);
        }
    }

    p {
        font-size: 14px;
        padding-left: 30px;
    }

    .bcImg {
        width: 100%;
        height: 361px;
        object-fit: cover;
    }
}

.imgfa1,
.imgfa2,
.imgfa3 {
    display: flex;
}

.imgFirst1,
.imgFirst2 {
    margin-top: 40px;
}

.imgFirst1,
.imgFirst2,
.imgSecond1,
.imgSecond2,
.imgThirdly1,
.imgThirdly2 {
    display: flex;
    width: 1100px;
    padding-top: 10px;
}

.useImg {
    width: 168px;
    height: 68px;
    border-radius: 50px;
    margin: 8px;
    padding: 2px;
    box-shadow: 16px 16px 40px #d6dbe8;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    img {
        width: 140px;
        padding: 20px;
    }
}

.imgFirst1,
.imgThirdly1 {
    animation: slideOne 50s linear 0s infinite;
}

.imgFirst2,
.imgThirdly2 {
    animation: slideTwo 50s linear infinite;
}

.imgSecond1 {
    animation: slideThree 50s linear infinite;
}

.imgSecond2 {
    animation: slideFour 50s linear infinite;
}

@keyframes slideOne {
    0% {
        transform: translate(0, 0);
    }

    49.5% {
        transform: translate(-100%, 0);
        animation-timing-function: step-end;
    }

    51% {
        transform: translate(100%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes slideTwo {
    0% {
        transform: translate(0, 0);
    }

    99% {
        transform: translate(-200%, 0);
        animation-timing-function: step-end;
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes slideThree {
    0% {
        transform: translate(0, 0);
    }

    49.5% {
        transform: translate(100%, 0);
        animation-timing-function: step-end;
    }

    51% {
        transform: translate(-100%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes slideFour {
    0% {
        transform: translate(-200%, 0);
    }

    99% {
        transform: translate(0, 0);
        animation-timing-function: step-end;
    }

    100% {
        transform: translate(0, 0);
    }
}

.slideImg {
    position: relative;

    &::before {
        display: block;
        content: "";
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 10;
        background: linear-gradient(to right, rgb(239, 240, 245), transparent 20%, transparent 50%, transparent 80%, rgb(239, 240, 245));
    }
}
</style>
